<template>
  <div class="wrapper h100">
    <div
      class="inner h100"
      :class="{ dangerShadow: dangerFlag }"
      :style="{ backgroundImage: $gbUrl($imgCatelog.bg.light[0]) }"
    >
      <div class="character">
        <CharacterPanel @handledanger="handleDanger"></CharacterPanel>
      </div>
      <MapPanel class="map" @startbattle="startBattle"></MapPanel>
    </div>
    <EwgDialog ref="BattleDialog" modal>
      <BattlePanel ref="BattlePanel" @close="closeBattleModal"></BattlePanel>
    </EwgDialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, ref } from "vue";
import MapPanel from "./mapPanel.vue";
import CharacterPanel from "./characterPanel.vue";
import BattlePanel, { BattlePanelRefs } from "./battlePanel.vue";
import { EwgDialogRefs } from "@/types/components";
export default defineComponent({
  components: {
    MapPanel,
    CharacterPanel,
    BattlePanel
  },
  setup() {
    const dangerFlag = ref(false);
    const handleDanger = (flag: boolean) => {
      dangerFlag.value = flag;
    };
    const BattleDialog = ref<EwgDialogRefs>();
    const BattlePanel = ref<BattlePanelRefs>();
    const closeBattleModal = () => {
      BattleDialog.value?.close();
    };
    const startBattle = (id: any) => {
      BattleDialog.value?.open();
      nextTick(() => {
        BattlePanel.value?.load(id);
      });
    };
    const startBattleByData = (monsterData: any, option: any) => {
      BattleDialog.value?.open();
      nextTick(() => {
        BattlePanel.value?.battleStart(monsterData, option);
      });
    };
    return {
      dangerFlag,
      handleDanger,
      BattleDialog,
      BattlePanel,
      startBattle,
      closeBattleModal,
      startBattleByData
    };
  }
});
</script>
<style lang="scss" scoped>
.wrapper {
  box-sizing: border-box;
  .inner {
    box-sizing: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border: 5px solid $--color-earthy;
    border-left: 0;
    box-shadow: 0 0 10px 0px $--color-earthy inset;
    position: relative;
    .character {
      width: 60%;
      height: 100%;
      position: relative;
    }
    .map {
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }
}
</style>
